import { createRouter, createWebHistory } from 'vue-router'
import LoginView from '@/views/LoginView.vue'
import { useUserStore } from '@/stores/userStore'
import Register from '@/views/Register.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: LoginView,
    },
    {
      path: '/register',
      component: Register,
    },
    {
      path: '/card/:carid',
      name: 'card',
      component: () => import('../components/CarDetailView.vue'),
      props: true,// 允许通过路由参数传递props
    },
    // {
    //   path: '/order/:orderid',
    //   name: 'OrderDetail',
    //   component: () => import('../components/OrderDetail.vue'),
    //   props: true,// 允许通过路由参数传递props
    // },
    {
      path: '/',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/StartView.vue'),
    },
    {
      path: '/MainFrameView',
      component: () => import('../views/MainFrameView.vue'),
      redirect: '/MainFrameView/data',
      children: [
        {
          path: 'cars',
          component: () => import('../views/CarsView.vue'),
        },
        {
          path: 'data',
          component: () => import('../views/DataView.vue'),
        },
        {
          path: 'orders',
          component: () => import('../views/OrdersView.vue'),
        },
        {
          path: 'afterSales',
          component: () => import('../views/AfterSalesView.vue'),
        },
        {
          path: 'myRental',
          component: () => import('../views/MyRentalView.vue'),
        },
        {
          path: 'news',
          component: () => import('../views/NewsView.vue'),
        },
        {
          path: 'ordersReservat',
          component: () => import('../views/OrdersReservatView.vue'),
        },
        {
          path: 'otherMessage',
          component: () => import('../views/OtherMessageView.vue'),
        },
        {
          path: 'user',
          component: () => import('../views/UserView.vue'),
        },
        {
          path: 'carM',
          component: () => import('../views/CarsManegeView.vue'),
        },
        {
          path: 'role',
          component: () => import('../views/RoleView.vue'),
        },
        {
          path: 'picture',
          component: () => import('../views/PictureView.vue'),
        },
        {
          path: 'menu',
          component: () => import('../views/MenuView.vue'),
        },
        {
          path: 'newsController',
          component: () => import('../views/NewsControllerView.vue'),
        },
        {
          path: 'order',
          component: () => import('../views/OrderMannege.vue'),
        },
        {
          path: 'order/:orderid',
          name: 'OrderDetail',
          component: () => import('../components/OrderDetail.vue'),
          props: true,// 允许通过路由参数传递props
        },
        {
          path: 'order/:orderid',
          name: 'reservat',
          component: () => import('../components/ReservatView.vue'),
          props: true,// 允许通过路由参数传递props
        },

      ]
    },
  ],
})
//添加路由守卫
router.beforeEach((to, from, next) => {
  // 不需要登录的白名单路由
  const whiteList = ['/', '/login', '/register', '/MainFrameView/otherMessage'];
  //创建stote实例
  let store = useUserStore();
  //判断当前路由是否为/(登录页面)，或者注册页面
  if (whiteList.includes(to.path)) {
    next();//表示放行
  } else {//需要对路由进行身份校验
    console.log();
    if (store.userinfo.username) {
      next();
    } else {
      //表示当前用户未登录=>跳转登录页面
      next("/login")
    }

  }
})
export default router
